<template>
  <div>
    <vm-cell label="头像"
             :has-arrow="true"
             :hasTopBorder="true"
             style="margin-top: 15px;"
             @cellClicked="clickHeadImg">
      <div class="text-right">
        <image slot="title"
               class="user-image text-right"
               :src="userImage"></image>
      </div>
    </vm-cell>

    <vm-cell label="姓名"
             :has-arrow="isAuth === 0"
             @cellClicked="clickRealName">
      <div slot="title"
           class="flex">
        <text v-if="isAuth === 0"
              class="text-muted text-right">未实名认证</text>
        <div v-else>
          <text class="text-right">{{user.realName}}</text>
          <text :class="[isAuth === 1 ? 'text-primary': 'text-muted', 'text-right', 'small']">({{isAuth === 1 ? '已实名认证': '实名审核中'}})</text>
        </div>
      </div>
    </vm-cell>

    <vm-cell label="手机号码"
             :has-arrow="true"
             :title="user.phoneNumber"
             placeholder="未填写手机号码"
             @cellClicked="clickPhone"></vm-cell>

    <vm-cell label="所在地区"
             :has-arrow="true"
             :title="addressCodeName"
             placeholder="选择你所在地区"
             @cellClicked="clickAddress"></vm-cell>

    <vm-cell label="地址详情"
             :has-arrow="true"
             :title="addressDetail"
             placeholder="填写街道、门牌号等详细信息"
             @cellClicked="clickAddressDetail"></vm-cell>

    <select-address :visible.sync="addressVisible"
                    :address-code="user.addressCode"
                    @select="onAddressSelect"></select-address>

    <wxc-dialog title="地址详情"
                :show="addressDetailVisible"
                main-btn-color="#42bd56"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
      <div slot="content"
           class="address-detail">
        <textarea v-model="addressDetail"
                  class="address-detail-input"
                  rows="3"
                  placeholder="填写街道、门牌号等详细信息"></textarea>
      </div>
    </wxc-dialog>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'
import SelectAddress from '../../components/select-address.vue'
import { STORAGE_USER, EVENT_GET_USER } from '../../plugins/constant'
import { WxcDialog } from 'weex-ui'

export default {
  components: {
    VmCell,
    SelectAddress,
    WxcDialog
  },
  props: {},
  data() {
    return {
      user: {},
      addressVisible: false,
      addressCode: '',
      addressCodeName: '',
      addressDetail: '',
      addressDetailVisible: false
    }
  },
  computed: {
    userImage() {
      return this.user.headImg || 'bmlocal://assets/user/common_img_default_head.png'
    },
    isAuth() {
      return +this.user.isAuth || 0
    }
  },
  watch: {},
  created() {
    this.getUser()
  },
  eros: {
    beforeBackAppear(params) {
      if (params && params.type === 1) {
        this.$router.setBackParams({ type: 1 })
        this.getUserRemote()
      }
    }
  },
  methods: {
    getUser() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
      this.addressDetail = this.user.addressDetail
      this.addressCode = this.user.addressCode
      this.getAddressCodeName(this.user.addressCode)
    },
    getUserRemote() {
      this.$http({
        method: 'GET',
        name: 'auth.me'
      }).then(res => {
        this.$storage.setSync(STORAGE_USER, res)
        this.user = res
      })
    },
    getAddressCodeName(addressCode) {
      if (!addressCode) { return }
      this.$http({
        method: 'GET',
        name: 'industrial.geo.address',
        data: { addressCode }
      }).then(res => {
        this.addressCodeName = res
      })
    },
    clickHeadImg() {
      this.$picture.pick({
        maxCount: 1,                 // 一次最多可选择图片数量 最大支持9张 默认是1
        ratioX: 1,
        ratioY: 1,
        allowCrop: true,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
      }).then(res => {
        this.uploadOss(res)
      }).catch(err => {
        this.$notice.toast({ message: '选择图片失败，请重试！' })
      })
    },
    uploadOss(images) {
      this.$oss.uploadImage({
        files: images
      }).then(res => {
        this.postHeadImg(res[0])
      }).catch(err => {
        this.$notice.toast({ message: '上传图片失败，请重试！' })
      })
    },
    postHeadImg(image) {
      this.$http({
        method: 'PUT',
        name: 'auth.user.head',
        params: {
          headImg: image
        },
        errorMsg: '修改头像失败，请重试！'
      }).then(res => {
        this.user.headImg = image
        this.$notice.toast({ message: '修改头像成功！' })
        this.$router.setBackParams({ type: 1 })
      })
    },
    clickRealName() {
      if (this.isAuth === 1) {
        this.$notice.toast({ message: '您已经实名认证,不能修改了!' })
      } else if (this.isAuth === -1) {
        this.$notice.toast({ message: '您的实名认证信息,正在审核中,请耐心等待!' })
      } else {
        this.$nav.open({ name: 'user.realname' })
      }
    },
    clickPhone() {
      this.$nav.open({ name: 'user.phone.verify' })
    },
    clickAddress() {
      this.addressVisible = true
    },
    onAddressSelect(id, name) {
      this.$http({
        method: 'PUT',
        name: 'auth.user.address',
        params: {
          addressCode: id,
          addressDetail: this.addressDetail
        },
        errorMsg: '地址设置失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '地址设置成功' })
        this.addressCode = id
        this.addressCodeName = name
        this.$router.setBackParams({ type: 1 })
      })
    },
    clickAddressDetail() {
      this.addressDetailVisible = true
    },
    wxcDialogCancelBtnClicked() {
      this.addressDetailVisible = false
      this.addressDetail = this.user.addressDetail
      this.$tools.resignKeyboard()
    },
    wxcDialogConfirmBtnClicked() {
      this.$tools.resignKeyboard()
      this.addressDetailVisible = false
      this.$http({
        method: 'PUT',
        name: 'auth.user.address',
        params: {
          addressCode: this.addressCode,
          addressDetail: this.addressDetail
        },
        errorMsg: '地址详情设置失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '地址详情设置成功' })
        this.$router.setBackParams({ type: 1 })
      }).catch(err => {
        this.addressDetail = this.user.addressDetail
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.user-image {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}
.text-muted {
  color: #999;
}
.text-primary {
  color: #42bd56;
}
.text-right {
  text-align: right;
}
.small {
  font-size: 26px;
}
.flex {
  flex: 1;
}
.address-detail {
  padding: 15px;
  border-width: 1px;
  border-color: #ddd;
  border-radius: 6px;
}
.address-detail-input {
  color: #333;
  tint-color: #999;
}
</style>
